<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Style settings
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.lineWidth = 1.2;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Define coordinates and dimensions
    const yRod = 180;
    const xA = 100;
    const l_pixels = 300;
    const xB = xA + l_pixels;
    const d_pixels = 100;
    const xP = xB + d_pixels;
    
    const yDim = 240;

    const xMid = xA + l_pixels / 2;
    const yQ = yRod - d_pixels;

    // Draw the charged rod AB
    ctx.fillRect(xA, yRod - 2.5, l_pixels, 5);

    // Draw labels for points A, B, P
    ctx.font = "20px Times New Roman";
    ctx.fillText("A", xA - 15, yRod - 15);
    ctx.fillText("B", xB + 15, yRod - 15);
    ctx.fillText("P", xP + 15, yRod - 15);

    // Draw the extension line from B to P (dashed)
    ctx.beginPath();
    ctx.setLineDash([4, 4]);
    ctx.moveTo(xB, yRod);
    ctx.lineTo(xP, yRod);
    ctx.stroke();
    ctx.setLineDash([]);

    // Draw horizontal dimension lines for l and d
    ctx.beginPath();
    // Vertical ticks
    ctx.moveTo(xA, yRod);
    ctx.lineTo(xA, yDim);
    ctx.moveTo(xB, yRod);
    ctx.lineTo(xB, yDim);
    ctx.moveTo(xP, yRod);
    ctx.lineTo(xP, yDim);
    
    // Horizontal line for l with arrows
    ctx.moveTo(xA, yDim);
    ctx.lineTo(xB, yDim);
    ctx.moveTo(xA + 8, yDim - 4);
    ctx.lineTo(xA, yDim);
    ctx.lineTo(xA + 8, yDim + 4);
    ctx.moveTo(xB - 8, yDim - 4);
    ctx.lineTo(xB, yDim);
    ctx.lineTo(xB - 8, yDim + 4);

    // Horizontal line for d with arrows
    ctx.moveTo(xB, yDim);
    ctx.lineTo(xP, yDim);
    ctx.moveTo(xB + 8, yDim - 4);
    ctx.lineTo(xB, yDim);
    ctx.lineTo(xB + 8, yDim + 4);
    ctx.moveTo(xP - 8, yDim - 4);
    ctx.lineTo(xP, yDim);
    ctx.lineTo(xP - 8, yDim + 4);
    ctx.stroke();

    // Add labels for dimensions l and d
    ctx.font = "italic 20px Times New Roman";
    ctx.fillText("l", (xA + xB) / 2, yDim + 15);
    ctx.fillText("d", (xB + xP) / 2, yDim + 15);

    // Draw point Q and its vertical dimension line
    // Point Q represented by a circle
    ctx.beginPath();
    ctx.arc(xMid, yQ, 3.5, 0, 2 * Math.PI);
    ctx.stroke();

    // Label for point Q
    ctx.font = "20px Times New Roman";
    // The original shows "oQ", with the 'o' being the circle.
    // We place 'Q' next to the circle.
    ctx.fillText("Q", xMid + 18, yQ);

    // Vertical dimension line for d
    ctx.beginPath();
    ctx.moveTo(xMid, yQ);
    ctx.lineTo(xMid, yRod);
    // Arrow at the top (near Q)
    ctx.moveTo(xMid - 4, yQ + 8);
    ctx.lineTo(xMid, yQ);
    ctx.lineTo(xMid + 4, yQ + 8);
    // Arrow at the bottom (on the rod)
    ctx.moveTo(xMid - 4, yRod - 8);
    ctx.lineTo(xMid, yRod);
    ctx.lineTo(xMid + 4, yRod - 8);
    ctx.stroke();

    // Label for vertical dimension d
    ctx.font = "italic 20px Times New Roman";
    ctx.fillText("d", xMid + 18, (yQ + yRod) / 2);

    // Draw the caption
    ctx.font = "22px KaiTi";
    ctx.fillText("习题 7-8 图", 300, 310);

</script>
</body>
</html>